<script setup>
import * as echarts from 'echarts'
onMounted(()=>{
  const userChart = echarts.init(document.getElementById('userStatistics'))
  const option = ref({
    title:{
      text:"用户统计"
    },
    tooltip:{},
    xAxis:{
      data:['2024-01','2024-02','2024-03','2024-04','2024-05','2024-06','2024-07','2024-08','2024-09','2024-10','2024-11','2024-12']
    },
    yAxis:{},
    series:[{
      name:"用户统计",
      type:"bar",
      data:[100,200,300,400,500,600,700,800,900,1000,1100,1200]
    }],
    grid:{
      left:'10%',
      containLabel:true
    }
  })
  userChart.setOption(option.value)

  // 原来窗口变化，图表没有变化，是因为图表没有重新渲染。这里监听窗口发生变化，重新渲染图表
  function resizeHandle() {
    userChart.resize()
  }
  window.addEventListener('resize', resizeHandle)
})

</script>

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
       <div id="userStatistics" ref="bar" style="width: 100%;height: 400px"></div>
      </el-col>
      <el-col :span="12" >
        <el-row :gutter="20" justify="center">
          <el-col :span ="10">
            <el-card>
              <el-statistic title="用户总数" :value="1000" :suffix="'人'" />
            </el-card>
          </el-col>
          <el-col :span ="10">
            <el-card>
              <el-statistic title="订单总数" :value="1000" :suffix="'单'" />
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row" justify="center">
          <el-col :span ="10">
            <el-card>
              <el-statistic title="访问总数" :value="1000" :suffix="'次'" />
            </el-card>
          </el-col>
          <el-col :span ="10">
            <el-card>
              <el-statistic title="今日访问总数" :value="1000" :suffix="'次'" />
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div id="chart3" style="width: 100%; height: 400px;background-color: #ffffff"></div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.row{
  margin-top: 1vh;
}
</style>
